<template>
 <div id="address">
        <div class="top">
            <input type="text" v-model="innerText" placeholder="输入地址">
            <span @click="add()">新增地址</span>
        </div>
        <h4>地址列表</h4>
        <div class="end">
            <div v-for="(item,index) in list" :key="index">
                <span>{{item.id}}</span>
                <span>{{item.addr}}</span>
                <span @click="del(item)">删除</span>
            </div>
        </div>
        <p v-show="list.length==0" class="empty">地址为空!</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
             innerText:'',
        list:[
            {id:'1',addr:'大门口'}
        ]
            }
        },
        methods:{
            add(){
                var obj = {id:this.list.length+1 , addr:this.innerText}
                this.list.push(obj)
            },
            del(item){ 
                this.list.splice(item.id-1,1)
            }
        },
      
}
</script>

<style lang="scss" scoped>
 *{
     padding: 0;
     margin: 0;
     box-sizing: border-box;
 }
 #address{
     padding: 5vw;
 }
 .top{
     display: flex;
     justify-content: space-between;
     margin-bottom: 2vw;
 }
 .top input{
     width: 70vw;
     height: 8vw;
     outline: none;
     border: none;
    //  background: ;
    border-radius: 4vw;
     border: 1px solid #ccc;
 }
 .top span{
     
     line-height: 8vw;
 }
 .end div{
     border: 1px solid #ccc;
     height: 8vw;
     margin: 3vw 0;
     line-height: 8vw;
     padding: 0 2vw;
 }
 .end div span:nth-child(2){
     margin: 0 2vw;
 }
 .end div span:last-child{
     float: right;
 }
 .colorful{
     background-color: aqua !important;
 }
 .empty{
    font-size: 5vw;
    margin-top: 2vw;
 }
</style>